<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>

<style type="text/css">
	#accountdiv {
		margin:auto;
		width:400px;
	}
	
	#accountdiv > div
	{
		float:left;
		padding:5px;
	}
	
	#accountdiv .nhan {
		text-align:right;
		width:30%;
	}

	#accountdiv .obj {
		width:65%;
	}	

	input {
		font-family:"Times New Roman", Times, serif;
	}
	.col1 {
		float:left;
		width:30%;
		overflow:hidden;
		padding:2px;
	}
	.col2 {
		float:left;
		width:65%;
		overflow:hidden;
		padding:2px;
	}
</style>
</head>

<body>
<form>
<div id="accountdiv">
	<div class="nhan">Người dùng :  </div>
    <div class="obj"><input type="text" id="un" value="" /><input type="hidden" id="macu" value="" /></div>
	<div class="nhan">Mật khẩu :  </div>
    <div><input type="text" id="pwd" value="" size="25" /></div>
	<div class="nhan">Nhóm :  </div>
    <div><div id="magrp"></div><input type="hidden" id="magrp1" value="" /></div>
</div>
</form>
<script type="text/javascript" language="javascript">
	$("#accountdiv #pwd").setMask({
		mask:"********************",
		onInvalid:function(c,nKey){
			msgbox("fail",'ký tự "'+c+'" không hợp lệ !.');
			$(this).css('background','red');
		},
		onValid: function(c,nKey){
			$(this).css('background','#40FF3F');
		},
		onOverflow: function(c,nKey){
			msgbox("fail","Quá số ký tự cho  phép !");
			$(this).css('background','red');
		}
	});
	$("#accountdiv #un").setMask({
		mask:"********************",
		onInvalid:function(c,nKey){
			msgbox("fail",'ký tự "'+c+'" không hợp lệ !.');
			$(this).css('background','red');
		},
		onValid: function(c,nKey){
			$(this).css('background','#40FF3F');
		},
		onOverflow: function(c,nKey){
			msgbox("fail","Quá số ký tự cho  phép !");
			$(this).css('background','red');
		}
	});
	$("#accountdiv #magrp").flexbox('modules/groups/json.php',{
			resultTemplate: '<tr><td>{id}</td><td>{name}</td></tr>',
			watermark: 'Chọn nhóm',
			paging: {pageSize:5},
			allowInput: true,
			width: 200,
			onSelect: function() {
				$("#accountdiv #magrp1").attr("value",this.getAttribute('hiddenValue'));
		}
	});
</script>	
</body>
</html>
